<template>
    <BorderBox8 class="content">
        <div class="dv-border-box-content">
            <div class="scroll-wrap">   
                <div class="scroll-warp-content" v-for="(order,index) in orderInfo.orderList" :key="index">
                    <div class="content-item-l">
                        <div class="content-top">
                            <span>{{ order.productOrderInfoCode }}</span>&nbsp;&nbsp;
                            <span>直通率:{{ order.firstPassYield }}</span>
                        </div>
                        <div class="content-bottom echarts-bar"></div>
                    </div>
                    <div class="content-item-r">
                        <scrollBoard v-bind="scrollBoardOtion" :dataset="order.processList" width="900" height="450"></scrollBoard>
                    </div>
                </div>
            </div>
        </div>
    </BorderBox8>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick,unref } from "vue";
import { BorderBox8 } from '@dataview/datav-vue3';
import * as echarts from 'echarts';
import { ElSelect,ElOption } from "element-plus";
//@ts-ignore
import ScrollBoard from './ScrollBoard.vue';
//@ts-ignore
import { reqOrderList, reqExceptOrderList } from "#/api/jflScreen/index";
import { lodash,sleep } from "#/utils/tools";



const orderInfo = reactive({
    page:1,
    size:1,
    total:0,
    orderList:[],
    timer:null
})



const scrollBoardOtion = reactive({
    header:['工序','计划数量','完成数/投入重量','未完成数/超出重量','不良数','合格率','不良率'],
    rowNum:6,
    columnWidth:[150,100,180,180,100,100,100],
    headerTextSize:18,
});

const getOrderList = () => {
    return new Promise((resolve,reject) => {
        const { page,size } = orderInfo;
        const params = { page,size,pushState:2 };
        reqOrderList(params).then(response => {
            const list = response.data.content;
            const total = response.data.totalElements;
            const arrayList = [];
            for(let i = 0; i < list.length; i++){
                const tmp = list[i];
                const xList = tmp.workOrderInfoDTOList.map(val => val.procedureName);
                const finished = tmp.workOrderInfoDTOList.map(val => val.finishQuantity >= 0 ? val.finishQuantity : 0);
                const unFinished = tmp.workOrderInfoDTOList.map((val,index) => {
                    if(index === 0){
                        return val.badQuantity;
                    } else {
                        return (val.planQuantity - val.finishQuantity) >= 0 ? (val.planQuantity - val.finishQuantity) : 0;
                    }
                });
                const quantityRate = tmp.workOrderInfoDTOList.map(val => val.passRate >= 0 ? val.passRate : 0);
                const infoTip = tmp.workOrderInfoDTOList.map((val,index) => {
                    const badQuantity = val.badQuantity || 0;
                    const badRate = (val.badRate || 0) + '%';
                    const planQuantity = val.planQuantity;
                    if(index === 0){
                        return `计划数量：${planQuantity}`;
                    } else {
                        return `计划数量：${planQuantity}\n不良数量：${badQuantity}\n不良率：${badRate}`;
                    }
                });
                const processList = [];
                tmp.workOrderInfoDTOList.forEach((pro,index) => {
                    const unFinished = index === 0 ? pro.badQuantity : ((pro.planQuantity - pro.finishQuantity) >= 0 ? (pro.planQuantity - pro.finishQuantity) : 0);
                    processList.push([pro.procedureName,pro.planQuantity,pro.finishQuantity,unFinished,pro.badQuantity,pro.passRate + '%',pro.badRate + '%']);
                })
                const obj = {
                    productOrderInfoCode:tmp.productOrderInfoCode,
                    firstPassYield:tmp.firstPassYield + '%',
                    xList,
                    yList:[finished,unFinished,quantityRate],
                    infoTip,
                    processList
                }
                arrayList.push(obj);
            }
            orderInfo.orderList = arrayList;
            orderInfo.total = total;
            resolve(null);
        })
    });
}

const initEcharts = (dom = null,index = 0) => {
  if(!dom) return;
  const { orderList, size} = orderInfo;
  const order = orderList[index];
  const echartsInstance = echarts.init(dom);
  const option = {
    grid: {
      show: true,
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '10%',
    },
    xAxis: {
      type: 'category',
      data: order.xList,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff',
        interval: 0
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '数量',
        nameLocation: 'end',
        nameGap: 30,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        name: '合格率',
        nameLocation: 'end',
        nameGap: 30,
        axisLine: {
        show: true,
        lineStyle: {
        color: '#fff'
        }
        },
        axisLabel: {
            color: '#fff',
            formatter: '{value}%'
        },
        splitLine: {
            show: false
        }
      }
    ],
    legend: {
      orient: 'horizontal',
      bottom: 'bottom',
      data: ['完成数(或投入重量)', '未完成数(或超出重量)'],
      textStyle: {
        color: '#fff'
      },
      itemGap: 5,
      itemWidth: 25,
      itemHeight: 14 
    },
    series: [
      {
        name: '完成数(或投入重量)',
        data: order.yList[0],
        type: 'bar',
        color: '#008c00',
        stack:'total',
        barWidth: 50,
        label: { 
          show: true, 
          position: 'inside',
          color: '#ffffff',
          fontSize: 18,
          fontWeight: 'normal',
          textShadowColor: 'transparent',
          formatter: '{c}'
        },
      },
      {
        name: '未完成数(或超出重量)',
        data: order.yList[1],
        type: 'bar',
        color: '#ff0000',
        stack:'total',
        barWidth: 50,
        label: { 
          show: true, 
          position: 'inside',
          color: '#ffffff',
          fontSize: 18,
          fontWeight: 'normal',
          textShadowColor: 'transparent',
          formatter: '{c}'
        },
      },
      {
        name: '合格率',
        data: order.yList[2],
        type: 'line',
        color: '#e4ff4b',
        yAxisIndex: 1,
        label: { 
          show: true, 
          position: 'inside',
          color: '#ffffff',
          fontSize: 18,
          fontWeight: 'normal',
          textShadowColor: 'transparent',
          formatter: '{c}%'
        },
        tooltip: {
            valueFormatter: (value) => value + '%'
        }
      }
    ],
    graphic: [
      {
        type: 'group',
        key: 'process-labels',
        children:[]
      }
    ]
  }
  option && echartsInstance.setOption(option);
  /**
  setTimeout(() => {
    const option = echartsInstance.getOption();
    const seriesData:any = option.series;
    const xAxisData = option.xAxis[0].data;
    const graphicChildren = [];
    xAxisData.forEach((processName, i) => {
      let barTotalValue = 0;
      seriesData.slice(0, 2).forEach(series => {
        barTotalValue += series.data[i] || 0;
      });
      const point = echartsInstance.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [i, barTotalValue]);
      graphicChildren.push({
        type: 'text',
        key: `process${i + 1}-label`,
        position: [point[0], point[1] - 70],
        style: {
            text: order.infoTip[i],
            fill: '#fff',
            fontSize: 18,
            textAlign: 'center'
        }
      });
    });
    echartsInstance.setOption({graphic: [{ key: 'process-labels',children: graphicChildren }]});
  }, 500);
  **/
}



const handlerChange = () => {
    const { page,size,total } = orderInfo;
    if(page * size >= total){
        orderInfo.page = 1;
    } else {
        orderInfo.page += 1;
    }
}


const init = async () => {
    await getOrderList();
    document.querySelectorAll(".echarts-bar").forEach((dom,index) => {
        initEcharts(dom,index);
    });
    if(orderInfo.timer) clearTimeout(orderInfo.timer);
    orderInfo.timer = setTimeout(() => {
        handlerChange();
        init();
    },10000);
}


onMounted(() => {
    init();
});

</script>
<style lang='scss' scoped>
.content{
    width:100%;
    height:100%;
    .dv-border-box-content{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .scroll-wrap {
            width: 1890px;
            height:506px;
            margin: 0 auto;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .scroll-warp-content{
            width: 1890px;
            height:506px;
            display: flex;
            justify-content: space-between;
        }

        .content-item-l{
            width: 48%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .content-top{
                width:100%;
                height:40px;
                font-size: 20px;
                color:#fff;
                padding: 0 5%;
                line-height: 40px;

                span {
                    font-size: 24px;
                }
            }
            .content-bottom{
                width:100%;
                height:calc(100% - 40px);
            }
        }

        .content-item-r{
            width: 48%;
            height: 100%;
            color:#fff
        }
    }
}
</style>